<div class="da-list-wrap">
  <div class="da-content-banner">
  <d-breadcrumb>
    <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
    <d-breadcrumb-item><a routerLink="/pages/process/technology-route">{{ 'process.breadcrumb.technologyRoute' | translate }}</a></d-breadcrumb-item>
    <d-breadcrumb-item>{{ 'process.breadcrumb.addtechnologyRoute' | translate }}</d-breadcrumb-item>
  </d-breadcrumb>
</div>
<div class="da-content-wrapper">

          <div class="card">
            <div class="card-title">
              <span>新增工艺路线</span>
            </div>
              <form dForm [layout]="layoutDirection" [labelSize]="'sm'"[labelAlign]="'end'" class="mt-3" (dSubmit)="submit()"
              >
              <section >
                <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveId" >
                  <d-tab id="基本信息" title="基本信息">

                      <div class="u-1-2">
                        <d-form-item >
                          <d-form-label><span class="Required">*</span>工艺路线编码</d-form-label>
                          <d-form-control>
                            <input dTextInput type="text" name="processNum" [(ngModel)]="technologyRoute.technologyRouteNum" [dValidateRules]="technologyRouteRules.technologyRouteNum">
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-2">
                        <d-form-item >
                          <d-form-label><span class="Required">*</span>工艺路线名称</d-form-label>
                          <d-form-control >
                            <input dTextInput type="text" name="processName" [(ngModel)]="technologyRoute.technologyRouteName" [dValidateRules]="technologyRouteRules.technologyRouteName">
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-2">
                        <d-form-item >
                          <d-form-label>备注</d-form-label>
                          <d-form-control >

                            <textarea dTextarea name="processNote" [(ngModel)]="technologyRoute.note"></textarea>
                          </d-form-control>
                        </d-form-item>
                      </div>
                  </d-tab>
                  <d-tab id="流程设计" title="流程设计">

                        <div class="setProcess">
                          <div class="view">
                            <div class="card1">
                              <div class="flow-start">
                                <span>流程开始</span>
                              </div>
                              <div class="puls-item">
                                <div class="long-arrow"></div>
                                <i (click)="addNode()" class="icon-add-2" title="添加"></i>
                              </div>
                              <div class="flow-nodes" *ngFor="let node of nodes ; let i = index">
                                <div class="node">
                                  <div class="text" *ngIf="i==0">
                                    <span>首序</span>
                                  </div>
                                  <div class="text" *ngIf="i==nodes.length-1&&i!=0">
                                    <span>末序</span>
                                  </div>
                                  <app-process-node (deleteNode)="deleteNode(node)" (click)="editNode(node)" [node]="node" [isClicked]="node.isClicked"></app-process-node>
                                </div>
                                  <div class="puls-item">
                                    <div class="long-arrow"></div>
                                    <i class="icon-add-2" title="添加" (click)="addNode(node)"></i>
                                  </div>
                              </div>
                              <div class="flow-end"><span>流程结束</span> </div>
                            </div>
                          </div>

                          <div class="input-group">
                            <div class="title">
                              <span>
                                工序设置
                              </span>
                            </div>
                            <div class="input-group-body" *ngIf="this.display">
                              <div class="input-g mt-5">
                                <label>
                                  工序
                                </label>
                                <d-select [options]="processOptions"  [filterKey]="'processName'" [valueKey]="'processId'" (valueChange)="selectProcess($event)" name="processId" [(ngModel)]="this.selectNode.processId"  [isSearch]="true"></d-select>
                              </div>
                              <div class="input-g mt-5">
                                <label>
                                  工序序号
                                </label>
                               <input dTextInput name="工序序号" [(ngModel)]="selectNode.processNumber" readonly>
                              </div>
                              <div class="input-g mt-5">
                                <label>
                                  是否首检
                                </label>
                                <d-toggle [checked]="false" name="first" [(ngModel)]="selectNode.isFirstInspection"></d-toggle>

                              </div>
                              <div class="input-g mt-5">
                                <label>
                                  是否检验
                                </label>
                                <d-toggle [checked]="false" name="end" [(ngModel)]="selectNode.isInspection"></d-toggle>

                              </div>
                              <div class="input-g mt-5">
                                <label>
                                  是否委外
                                </label>
                                <d-toggle [checked]="false" name="isOutsourcing" [(ngModel)]="selectNode.isOutsourcing"></d-toggle>
                              </div>
                              <!-- <div class="input-g mt-5">
                                <label>
                                  可入库
                                </label>
                                <d-toggle [checked]="false"></d-toggle>

                              </div> -->
                            </div>
                          </div>
                        </div>

                  </d-tab>

                </d-tabs>
              </section>
              <d-form-operation >
                <d-button bsStyle="primary" dFormSubmit >确定</d-button>
                <d-button class="ms-3" bsStyle="common" (click)=" cancle()">取消</d-button>
              </d-form-operation>
            </form>
            </div>

</div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
